import React, { lazy,Suspense } from 'react';
import { Route,HashRouter , Switch } from 'react-router-dom';
import { Layout } from 'antd';
// import Slide from './components/common/Slide';
import Header from './components/common/Header';
import '../src/assets/css/index.less'
const {Footer, Sider, Content} = Layout;

// 路由表

const Home = lazy(() => import('./components/pages/home')); // 首页
const Detail = lazy(() => import('./components/pages/detail')); // 详情
const Locale = lazy(() => import('./components/pages/locale')); // 国际化


const MyRoute = (props) => {
    return (
        <Layout>
            <Sider>Sider</Sider>
            <Layout>
                <Header></Header>
                <Content>
                    {/* 大家只需关注这里即可，由于我使用了ant 外面的结构代码可以暂时忽略 */}
                    <HashRouter> 
                        <Suspense fallback={<div>Loading...</div>} maxDuration={1000}>
                            <Switch>
                                <Route exact path="/" component={Home}/>
                                <Route exact path="/home" component={Home}/>
                                <Route exact path="/detail" component={Detail}/>
                                <Route exact path="/locale" component={Locale}/>
                            </Switch>
                        </Suspense>
                    </HashRouter>
                </Content>
                <Footer>Footer</Footer>
            </Layout>
        </Layout>
    )
}
export default MyRoute;